<template>
	<view style="padding-bottom: 32rpx;">
		<view class="header">
			<view class="edit">
				<image style="width: 44rpx;height: 44rpx;margin-top: 20rpx;" src="../../static/imgs/shezhi.png"
					@click="navTo('./editInfo/editInfo')"></image>
			</view>
			<view class="userInfo">
				<image class="headPic" :src="userInfo.head_pic"></image>
				<view class="infoText">
					<view class="name">
						<text>{{userInfo.nickname}}</text>
						<u-rate :disabled='true' :count="count" v-model="countNum" size='20' inactive-icon="star-fill"
							inactive-color='#048DD6' active-color='#FFE038' gutter='4' v-if="userInfo.user_level == 4">
						</u-rate>
					</view>
					<view class="level" v-if="userInfo.user_level == 0">
						<image src="../../static/imgs/vipicon1.png" mode=""></image>
						<text>普通会员</text>
					</view>
					<view class="level" v-if="userInfo.user_level == 1">
						<image src="../../static/imgs/vipicon2.png" mode=""></image>
						<text>爱世界VIP</text>
					</view>
					<view class="level" v-if="userInfo.user_level == 3">
						<image src="../../static/imgs/vipicon2.png" mode=""></image>
						<text>经销商</text>
					</view>
					<view class="level" v-if="userInfo.user_level == 4">
						<image src="../../static/imgs/vipicon3.png" mode=""></image>
						<text>城市合伙人</text>
					</view>
					<view class="idNum">
						ID: {{userInfo.user_name}}
					</view>
				</view>
				<view class="invite" @click="navTo('./extend/poster/poster')">
					<image :src="qrcode" mode=""></image>
					<u-icon name="arrow-right" color="#FFFFFF" size="28"></u-icon>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="tabs">
				<view class="vip" v-if="userInfo.user_level == 0">
					<view class="text">
						<text class="text1">VIP价值</text>
						<text class="text2">超值礼包 享八大权益</text>
					</view>
					<view class="buy" @click="navTo('./upvip/upvip')">
						立即购买
					</view>
				</view>
				<view class="vip" v-if="userInfo.user_level == 1 || userInfo.user_level == 3">
					<view class="text">
						<text class="text1">城市合伙人尊享特权</text>
						<text class="text2">终身尊享玩商 玩赚世界</text>
					</view>
					<view class="buy" @click="navTo('./upvip/vipEquity')">
						立即购买
					</view>
				</view>
				<view class="vip" v-if="userInfo.user_level == 4">
					<view class="text">
						<text class="text1">城市合伙人尊享特权</text>
						<text class="text2">终身尊享玩商 玩赚世界</text>
					</view>
					<view class="buy" style="opacity: 0.5;">
						立即购买
					</view>
				</view>
				<view class="tab-ul">
					<view class="tab-li" @click="navTo('./wallet/wallet')">
						<image src="../../static/imgs/wodeqb.png"></image>
						<text>我的钱包</text>
					</view>
					<view class="tab-li" @click="navTo('./welfare/welfare')">
						<image src="../../static/imgs/fulij.png"></image>
						<text>福利金</text>
					</view>
					<view class="tab-li" @click="navTo('./travelFund/travelFund')">
						<image src="../../static/imgs/lvyoujj.png"></image>
						<text>旅游基金</text>
					</view>
					<view class="tab-li" @click="navTo('./myVip/myVip')">
						<image src="../../static/imgs/wodevip.png"></image>
						<text>我的VIP</text>
					</view>
					<view class="tab-li" @click="navTo('./upvip/upvip')" v-if="userInfo.user_level == 1">
						<image src="../../static/imgs/wodeqy.png"></image>
						<text>我的权益</text>
					</view>
					<view class="tab-li" @click="navTo('./upvip/vipEquity')" v-if="userInfo.user_level == 4">
						<image src="../../static/imgs/wodeqy.png"></image>
						<text>我的权益</text>
					</view>
					<view class="tab-li" @click="notice" v-if="userInfo.user_level == 0">
						<image src="../../static/imgs/wodeqy.png"></image>
						<text>我的权益</text>
					</view>
				</view>
			</view>
			<view class="shopTab">
				<view class="shopTab-item" @click="navTo('./orderCenter/orderCenter')">
					<image src="../../static/imgs/dingdanzx.png" mode=""></image>
					<text>订单中心</text>
				</view>
				<view class="shopTab-item" @click="navTo('./commonInfo/commonInfo')">
					<image src="../../static/imgs/changyongxx.png" mode=""></image>
					<text>常用信息</text>
				</view>
				<view class="shopTab-item" @click="navTo('./collect/collect')">
					<image src="../../static/imgs/wodecc.png" mode=""></image>
					<text>我的收藏</text>
				</view>
				<view class="shopTab-item" @click="navTo('./kefu/kefu')">
					<image src="../../static/imgs/wodekf.png" mode=""></image>
					<text>我的客服</text>
				</view>
			</view>
			<view class="otherTab">
				<view class="otherTab-item" @click="navTo('./extend/extend')">
					<image src="../../static/imgs/fenxiaozx.png" mode=""></image>
					<text>分销中心</text>
				</view>
				<view class="otherTab-item" @click="navTo('./business/business')">
					<image src="../../static/imgs/shangxy.png" mode=""></image>
					<text>商学院</text>
				</view>
				<view class="otherTab-item" @click="navTo('./setShop/setShop')">
					<image src="../../static/imgs/woyaokd.png" mode=""></image>
					<text>我要开店</text>
				</view>
				<view class="otherTab-item" @click="navTo('./invitation/invitation')">
					<image src="../../static/imgs/wodeyy.png" mode=""></image>
					<text>我的邀约</text>
				</view>
			</view>
		</view>
		<view class="tip">
			<view class="agree">
				<text @click="navTo('./clause')">《隐私协议》</text><text @click="navTo('./server')">《服务条款》</text>
			</view>
			<view class="versions">
				版本号：{{version}}
			</view>
		</view>
	</view>
</template>

<script>
	import myRequest from '../../api/index.js'
	export default {
		data() {
			return {
				count: 5,
				countNum: 0,
				userInfo: {}, //用户信息
				qrcode: '', //二维码
				version: '' //版本
			}
		},
		onShow() {
			this.getInfo()
			this.getInvit()
		},
		onLoad() {
			this.getVersions()
		},
		methods: {
			notice() {
				uni.showToast({
					title: '开通vip,尊享超值权益',
					icon: 'none'
				})
			},
			// 获取当前版本号
			getVersions() {
				let that = this
				plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
					that.version = widgetInfo.version
				});
			},
			// 获取验证码
			async getInvit() {
				let res = await myRequest.getInvitecode()
				if (res.status) {
					this.qrcode = res.data.replace(/_/g, "/")
				}
			},
			// 用户信息
			async getInfo() {
				let res = await myRequest.getUserInfo()
				if (res.status) {
					this.userInfo = res.data
					this.$store.commit('changeInfo', res.data) // 保存用户信息
				}
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 484rpx;
		@include bgi('../../static/imgs/minebgi.png');

		.edit {
			padding-top: var(--status-bar-height);
			display: flex;
			justify-content: flex-end;
			padding-right: 20rpx;
		}

		.userInfo {
			padding: 66rpx 22rpx 0;
			display: flex;
			align-items: center;

			.headPic {
				max-width: 140rpx;
				max-height: 140rpx;
				object-fit: cover;
				object-position: 50% 50%;
				border-radius: 50%;
			}

			.infoText {
				margin-left: 24rpx;

				.name {
					padding-left: 4rpx;
					margin-top: 20rpx;

					text {
						font-size: 34rpx;
						font-family: Segoe UI;
						font-weight: 400;
						color: #FFFFFF;
						margin-right: 16rpx;
					}
				}

				.level {
					padding-left: 4rpx;
					margin-top: 10rpx;
					height: 48rpx;
					width: fit-content;
					width: -webkit-fit-content;
					width: -moz-fit-content;
					background: rgba(255, 255, 255, 0.51);
					border-radius: 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 4rpx 8rpx;

					image {
						width: 32rpx;
						height: 32rpx;
					}

					text {
						margin-left: 6rpx;
						font-size: 28rpx;
						font-family: Segoe UI;
						font-weight: 400;
						color: #FF9D00;
					}
				}

				.idNum {
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #FFFFFF;
					margin-top: 10rpx;
				}
			}

			.invite {
				margin-left: auto;
				display: flex;
				align-items: center;

				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.main {
		margin-top: -88rpx;

		.tabs {
			width: 100%;
			height: 310rpx;
			@include bgi('../../static/imgs/vipbuybgi.png');

			.vip {
				display: flex;
				align-items: center;
				padding-left: 68rpx;
				padding-right: 44rpx;
				height: 150rpx;
				padding-bottom: 28rpx;

				.text {
					display: flex;
					flex-direction: column;

					.text1 {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 600;
						color: #6C4817;
					}

					.text2 {
						font-size: 28rpx;
						font-family: PingFangSC-Medium;
						color: #726207;
						margin-top: 8rpx;
					}
				}

				.buy {
					margin-left: auto;
					width: 156rpx;
					height: 56rpx;
					background: #FFFFFF;
					border-radius: 40rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #726207;
					line-height: 56rpx;
					text-align: center;
				}
			}

			.tab-ul {
				width: 100%;
				height: 160rpx;
				display: flex;
				align-items: center;
				justify-content: space-evenly;

				.tab-li {
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;

					image {
						width: 48rpx;
						height: 48rpx;
					}

					text {
						margin-top: 20rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
					}
				}
			}
		}

		.shopTab {
			width: 710rpx;
			height: 196rpx;
			background: #FFFFFF;
			box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.05);
			border-radius: 16rpx;
			margin: 28rpx auto 0;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.shopTab-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 64rpx;
					height: 64rpx;
				}

				text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-top: 20rpx;
				}
			}
		}

		.otherTab {
			width: 710rpx;
			height: 176rpx;
			background: #FFFFFF;
			box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.05);
			border-radius: 16rpx;
			margin: 32rpx auto 0;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.otherTab-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-top: 20rpx;
				}
			}
		}
	}

	.tip {
		text-align: center;
		margin-top: 88rpx;
		padding-bottom: 20rpx;
		.agree {
			font-size: 24rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #3587F7;
		}

		.versions {
			font-size: 24rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #666666;
			margin-top: 10rpx;
		}
	}
</style>
